<template>
  <el-tag class="clientDetails">
    <el-card id="searchForm">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="客户端ID" size="mini">
          <el-input v-model="searchForm.name" placeholder="请输入客户端ID"></el-input>
        </el-form-item>
        <el-form-item label="授权平台" size="mini">
          <el-select v-model="searchForm.clientId" placeholder="请选择平台">
            <el-option label="小度平台" value="speaker"></el-option>
            <el-option label="天猫精灵" value="tianmao"></el-option>
            <el-option label="小米小爱" value="xiaoai"></el-option>
            <el-option label="其他平台" value="xiaoyi"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click.native="reactBtn" plain>重置</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="visible = true" plain>
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 2.表格 -->
    <el-card class="tabBox ">
      <el-table v-bind:data="tableData" border v-loading=tableLoading align="center"
        :header-cell-style="{background:'#f8f8f9',color:'#606266',fontSize: 14,}">
        <el-table-column label="客户端ID" prop="clientId" width="80"></el-table-column>
        <el-table-column label="资源" prop="resourceIds"></el-table-column>
        <el-table-column label="权限平台" prop="scope"></el-table-column>
        <el-table-column prop="type" align="center" label="授权平台" :formatter="formatterType">
          <template slot-scope="scope">
            <el-tag :clientId="type(scope.row.clientId)" disable-transitions>
              {{
              scope.row.clientId == 'speaker'
              ? "小度平台"
              : scope.row.clientId == 'tianmao'
              ? "天猫精灵"
              : scope.row.clientId == 'xiaoai'
              ? "小米小爱"
              : "其它平台"
              }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="自动授权" :formatter="approveFn" prop="autoapprove" align="center" width="78">
        </el-table-column>
        <el-table-column label="授权模式" prop="authorizedGrantTypes" align="center">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.authorizedGrantTypes.indexOf('client_credentials')!==-1?true:false">
              客户端模式</el-tag>
            <el-tag type="info" v-if="scope.row.authorizedGrantTypes.indexOf('password')!==-1?true:false">密码模式</el-tag>
            <el-tag type="info" v-if="scope.row.authorizedGrantTypes.indexOf('authorization_code')!==-1?true:false">
              授权码模式</el-tag>
            <el-tag type="info" v-if="scope.row.authorizedGrantTypes.indexOf('implicit')!==-1?true:false">简化模式</el-tag>
            <el-tag type="info" v-if="scope.row.authorizedGrantTypes.indexOf('refresh_token')!==-1?true:false">刷新Token
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="回调地址" prop="webServerRedirectUri" align="center"></el-table-column>
        <el-table-column label="权限" prop="authorities" align="center"></el-table-column>
        <el-table-column label="Token有效期" prop="accessTokenValidity" width="80" align="center"></el-table-column>
        <el-table-column label="Token刷新时间" prop="refreshTokenValidity" width="80" align="center"></el-table-column>
        <el-table-column label="操作" width="65" align="center">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" icon="el-icon-edit" @click="triggerUpdate(row)">
              修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 3.分页 -->
    <el-pagination background :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total" hide-on-single-page>
    </el-pagination>

    <!-- 新增/修改 -->
    <el-dialog :title="+ruleForm.clientId===0?`添加云云对接`:`修改云云对接`" :visible="visible" :close-on-click-modal="false"
      :close-on-press-escape="false" :before-close="closeDialog">
      <el-form label-width="100px">
        <el-form-item label="授权平台" prop="clientId">
          <el-select v-model="ruleForm.clientId" placeholder="请选择数据类型" size="small">
            <el-option label="小度平台" value="speaker"></el-option>
            <el-option label="天猫精灵" value="tianmao"></el-option>
            <el-option label="小米小爱" value="xiaoai"></el-option>
            <el-option label="其它平台" value="xiaoyi"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户端ID" prop="clientId">
          <el-input v-model.trim="ruleForm.clientId"></el-input>
        </el-form-item>
        <el-form-item label="资源集合" prop="resourceIds">
          <el-input v-model.trim="ruleForm.resourceIds"></el-input>
        </el-form-item>
        <el-form-item label="授权模式" prop="authorizedGrantTypes">
          <el-input type="textarea" :rows="2" placeholder="请输入授权模式" v-model.trim="ruleForm.authorizedGrantTypes">
          </el-input>
        </el-form-item>
        <el-form-item label="秘钥" prop="clientSecret">
          <el-input v-model.trim="ruleForm.clientSecret"></el-input>
        </el-form-item>
        <el-form-item label="回调地址" prop="webServerRedirectUri">
          <el-input type="textarea" :rows="2" placeholder="请输入回调地址" v-model.trim="ruleForm.webServerRedirectUri">
          </el-input>
        </el-form-item>
        <el-form-item label="权限" prop="authorities">
          <el-input v-model.trim="ruleForm.authorities"></el-input>
        </el-form-item>
        <el-form-item label="Token有效期" prop="accessTokenValidity">
          <el-input v-model.trim="ruleForm.accessTokenValidity"></el-input>
        </el-form-item>
        <el-form-item label="Token刷新" prop="refreshTokenValidity">
          <el-input v-model.trim="ruleForm.refreshTokenValidity"></el-input>
        </el-form-item>
        <el-form-item label="预留信息" prop="remarks">
          <el-input type="textarea" :rows="2" placeholder="请输入预留信息" v-model.trim="ruleForm.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" disabled>确认</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>

  </el-tag>
</template>

<script>
export default {
  name: "clientDetails",
  data() {
    return {
      //搜索
      searchForm: {
        name: "",
        clientId: "",
      },
      inputId: "",
      //表单
      visible: false,//控制弹窗显示/隐藏  
      confirmLoading: false,//防抖按钮
      ruleForm: {
        // selectval: "",
        clientId: "", //客户端ID
        resourceIds: "", //资源合集
        authorizedGrantTypes: "",//授权模式
        clientSecret: "",//密钥
        webServerRedirectUri: "",//回调地址
        authorities: "",//权限
        accessTokenValidity: "",//Token有效期
        refreshTokenValidity: "",//Token刷新时间
        remarks: "",//预留信息

      },
      clientId: "",
      textarea: '',//文本输入图框
      //表格相关
      tableData: [],
      tableLoading: false,
      selectArr: [],
      val: "",
      platArr: [],
      pagination: {
        pageNum: 1, //当前第N页
        pageSize: 10, //一页N条
        total: 0 //总条数
      },
    };
  },
  methods: {
    approveFn(row) {
      return row.autoapprove == "true" ? "自动授权" : '用户验证'
    },
    // 获取下拉框选中的数据
    searchSelect(value) {
      this.val = value;
    },
    // 表格授权平台
    type(clientId) {
      if (clientId === 'speaker') {
        return "小度平台";
      } else if (clientId === 'tianmao') {
        return "天猫精灵";
      } else if (clientId === 'xiaoai') {
        return "小米小爱";
      } else if (clientId === 'xiaoyi') {
        return "其它平台";
      }
    },
    // 搜索
    search() {
      let clientId = this.searchForm.name
        || this.searchForm.clientId;
      this.init(_, clientId);
    },
    // 清空下拉框数据
    reactBtn() {

      this.searchForm.name = "";
      this.searchForm.clientId = "";
      this.init();
    },
    //格式化
    formatterType(row) {
      if (row.clientId === 'speaker') {
        return "小度平台";
      } else if (row.clientId === 'tianmao') {
        return "天猫精灵";
      } else if (row.clientId === 'xiaoai') {
        return "小米小爱";
      } else if (row.clientId === 'xiaoyi') {
        return "其它平台";
      }
    },
    // 根据当前页&每页展示条数，从服务器获取列表
    async init(_, clientId) {
      this.tableLoading = true;
      try {
        let { pageNum, pageSize } = this.pagination;
        let { code, total, rows } = await this.$api.clientDetails.clientList(
          pageNum,
          pageSize,
          _,
          clientId
        );
        let { data } = await this.$api.clientDetails.platForm();
        this.selectArr = data;
        if (+code === 200) {
          this.pagination.total = total;
          this.tableData = rows;

          let arr = [];
          this.tableData.map(item => {
            arr.push(item.autoapprove);
          });

          data.map(item => {
            this.platArr.push(item.dictLabel);//dictLabel
          });


        } else {
          this.pagination.total = 0;
          this.tableData = [];
        }

      } catch (_) {
        console.log(_);
      }
      this.tableLoading = false;
    },

    // 触发修改
    triggerUpdate(row) {
      // this.val = val;
      let { clientId, resourceIds, autoapprove, authorizedGrantTypes, clientSecret, webServerRedirectUri,
        authorities, accessTokenValidity, refreshTokenValidity, remarks } = row;
      // 先把修改项的ID存储到表单状态中
      this.ruleForm.clientId = clientId;
      // 把信息填充到各个表单中{row中包含表单需要的数据，直接赋值即可}
      // val = this.val
      // this.ruleForm.selectval = this.val
      this.ruleForm.resourceIds = resourceIds;
      this.ruleForm.autoapprove = autoapprove;
      this.ruleForm.authorizedGrantTypes = authorizedGrantTypes;
      this.ruleForm.clientSecret = clientSecret;
      this.ruleForm.webServerRedirectUri = webServerRedirectUri;
      this.ruleForm.authorities = authorities;
      this.ruleForm.accessTokenValidity = accessTokenValidity;
      this.ruleForm.refreshTokenValidity = refreshTokenValidity;
      this.ruleForm.remarks = remarks;
      this.ruleForm.clientId = clientId;
      this.visible = true;

    },

    // 关闭弹框 & 清空表单信息
    closeDialog() {
      this.visible = false;
      this.confirmLoading = false;
      this.val = "";
      this.ruleForm = {
        // selectval: "",
        clientId: "",
        resourceIds: "",
        autoapprove: "",
        authorizedGrantTypes: "",
        clientSecret: "",
        webServerRedirectUri: "",
        authorities: "",
        accessTokenValidity: "",
        refreshTokenValidity: "",
        remarks: "",
      };
    },
  },
  created() {
    this.init(); //执行init
  }
};
</script>

<style lang="less" scoped>
/deep/.el-card .el-form-item {
  margin-bottom: 0px;
}

.clientDetails {
  width: 98%;
  margin: auto;
}

.el-card {
  margin-bottom: 10px;
}

/deep/#searchForm .el-form-item__label {
  font-weight: bold;
}

/deep/.tabBox .el-tag.el-tag--info {
  margin-bottom: 5px;
}
</style>
